import React, { Component, memo, Suspense } from 'react';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import {
  Row,
  Col,
  Card,
  List,
  Avatar,
  Button,
  Form,
  Popconfirm,
  Divider,
  Modal,
  Slider,
  InputNumber,
  Collapse,
  Icon,
  message,
  Select,
  Timeline,
  Input,
  Tabs,
  TimePicker,
  Table,
} from 'antd';
import Link from 'umi/link';
import { formatMessage } from 'umi/locale';
import { connect } from 'dva';
import styles from '../Dashboard/Analysis.less';

import { Stage, Layer, Text, Image, Line, Label, Tag, Rect } from 'react-konva';
// import moment from 'moment@2.29.1@moment';
import { Bar } from '@/components/Charts';

const SalesCard = memo(({ salesData }) => (
  <Card bordered={false} bodyStyle={{ padding: 0 }}>
    <div className={styles.salesCard}>
      <Row>
        <Col xl={16} lg={12} md={12} sm={24} xs={24}>
          <div className={styles.salesBar}>
            <Bar height={295} title={'本年月生产记录'} data={salesData} />
          </div>
        </Col>
      </Row>
    </div>
  </Card>
));

@connect(({ logger }) => ({ logger }))
class LineImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };
  componentDidMount() {
    this._isMounted = true;
    const image = new window.Image();
    image.src = this.props.logger.lineImagePreviewSrc;
    image.onload = () => {
      if (this._isMounted) {
        this.setState({
          image: image,
        });
      }
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.logger.lineImagePreviewSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={this.state.image ? this.state.image.width : 1000}
        height={this.state.image ? this.state.image.height : 1650}
      />
    );
  }
}

@connect(({ logger }) => ({ logger }))
class CutterImage extends React.Component {
  constructor(props) {
    super(props);
  }
  state = {
    image: null,
  };
  componentDidMount() {
    this._isMounted = true;
    const image = new window.Image();
    image.src = this.props.logger.cutterImagePreviewSrc;
    image.onload = () => {
      if (this._isMounted) {
        this.setState({
          image: image,
        });
      }
    };
  }

  componentWillUpdate() {
    const image = new window.Image();
    image.src = this.props.logger.cutterImagePreviewSrc;
    image.onload = () => {
      this.setState({
        image: image,
      });
    };
  }

  componentWillUnmount() {
    this.setState = (state, callback) => {
      return;
    };
  }

  render() {
    return (
      <Image
        image={this.state.image}
        width={this.state.image ? this.state.image.width : 950}
        height={this.state.image ? this.state.image.height : 880}
      />
    );
  }
}

@connect(({ logger }) => ({ logger }))
@Form.create()
class HdLogger extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    loggerFileChoosed: '', // 选择的日志文件名称,要根据选择,去确定要显示的日志.
    timeChoosed: null,
    timeChoosedHour: '',
    debugIdChoosed: '', // 板编号的默认选择.
    lineImageDirChoosed: '切线', // 上料默认显示的目录.
    lineImageIndexChoosed: '请选择图像编号', // 上料默认显示的板编号
    cutterImageDirChoosed: '起点检测原图', // 铡刀图片默认显示的目录
    cutterImageIndexChoosed: '请选择图像编号', // 铡刀图像编号选择
  };
  callback = e => {
    const { dispatch } = this.props;
    const { loggerFileChoosed, lineImageDirChoosed, cutterImageDirChoosed } = this.state;
    dispatch({
      type: 'logger/getLoggerInfo',
      payload: loggerFileChoosed,
    });
    dispatch({
      type: 'logger/getLineImageDirBoardList',
      payload: lineImageDirChoosed,
    });
    dispatch({
      type: 'logger/getCutterImageDirBoardList',
      payload: cutterImageDirChoosed,
    });
    dispatch({
      type: 'logger/getProduceAmountRecord',
    });
  };

  openFileSaveDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/openFileSaveDir',
    });
  };

  clearFileSaveDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/clearFileSaveDir',
    });
  };

  // 线阵图片目录点击了预览图片按钮
  preViewLineImage = e => {
    const { dispatch } = this.props;
    const { lineImageIndexChoosed } = this.state;
    dispatch({
      type: 'logger/preViewLineImage',
      payload: lineImageIndexChoosed,
    });
  };

  // 铡刀图片目录点击了预览图片按钮
  preViewCutterImage = e => {
    const { dispatch } = this.props;
    const { cutterImageIndexChoosed } = this.state;
    dispatch({
      type: 'logger/preViewCutterImage',
      payload: cutterImageIndexChoosed,
    });
  };

  openLineImageDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/openLineImageDir',
    });
  };

  openCutterImageDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/openCutterImageDir',
    });
  };

  onCutterImageDirChange = (key, e) => {
    const { dispatch } = this.props;
    this.setState({
      cutterImageDirChoosed: e.props.children,
    });
    this.setState({
      cutterImageIndexChoosed: '请选择图像编号',
    });
    dispatch({
      type: 'logger/getCutterImageDirBoardList',
      payload: e.props.children,
    });
  };

  onLineImageDirChange = (key, e) => {
    const { dispatch } = this.props;
    this.setState({
      lineImageDirChoosed: e.props.children,
    });
    this.setState({
      lineImageIndexChoosed: '请选择图像编号',
    });
    dispatch({
      type: 'logger/getLineImageDirBoardList',
      payload: e.props.children,
    });
  };

  onChange = (key, e) => {
    const { dispatch } = this.props;
    this.setState({
      loggerFileChoosed: e.props.children,
    });
    dispatch({
      type: 'logger/getLoggerInfo',
      payload: e.props.children,
    });
  };

  onIdSelectChange = (key, e) => {
    const { dispatch } = this.props;
    this.setState({
      debugIdChoosed: e.props.children,
    });
  };

  onLineImageIdChange = (key, e) => {
    const { dispatch } = this.props;
    this.setState({
      lineImageIndexChoosed: e.props.children,
    });
  };

  onCutterImageIdChange = (key, e) => {
    const { dispatch } = this.props;
    this.setState({
      cutterImageIndexChoosed: e.props.children,
    });
  };

  updateLoggerInfoByBoardIndex = e => {
    const { dispatch } = this.props;
    const { debugIdChoosed } = this.state;
    dispatch({
      type: 'logger/updateLoggerInfoByBoardIndex',
      payload: debugIdChoosed,
    });
  };
  updateLoggerInfoByHourTime = e => {
    const { dispatch } = this.props;
    const { timeChoosedHour } = this.state;
    dispatch({
      type: 'logger/updateLoggerInfoByHourTime',
      payload: timeChoosedHour,
    });
  };

  onTimeChooseChange = time => {
    let timeHour;
    if (time !== null) {
      timeHour = time.format('HH:mm:ss');
      console.log('timeHour:,', timeHour);
    } else {
      timeHour = '';
    }
    this.setState({
      timeChoosed: time,
      timeChoosedHour: timeHour,
    });
  };

  openDebugDir = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/openDebugDir',
    });
  };

  handleDebugIdOnSearch = value => {
    let that = this;
    if (!this.timer) {
      this.timer = setTimeout(function() {
        that.searchDebugIdValue(value);
        that.timer = null;
      }, 50);
    }
  };

  handleLineImageIndexOnSearch = value => {
    let that = this;
    if (!this.timer) {
      this.timer = setTimeout(function() {
        that.searchValue(value);
        that.timer = null;
      }, 50);
    }
  };

  handleCutterImageIndexOnSearch = value => {
    let that = this;
    if (!this.timer) {
      this.timer = setTimeout(function() {
        that.searchCutterImageValue(value);
        that.timer = null;
      }, 50);
    }
  };

  searchDebugIdValue = value => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/searchDebugIdValue',
      payload: value,
    });
  };

  searchCutterImageValue = value => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/searchCutterImageIndex',
      payload: value,
    });
  };

  searchValue = value => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/searchImageIndex',
      payload: value,
    });
  };

  closeCutterImagePreviewModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/updateCutterImageSrc',
      payload: [false, null, ''],
    });
  };

  closeLineImagePreviewModal = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/updateLineImageSrc',
      payload: [false, null, ''],
    });
  };

  nextCutterImageSrc = e => {
    const { dispatch } = this.props;
    this.closeCutterImagePreviewModal();
    dispatch({
      type: 'logger/nextCutterImageSrc',
    });
  };

  lastCutterImageSrc = e => {
    const { dispatch } = this.props;
    this.closeCutterImagePreviewModal();
    dispatch({
      type: 'logger/lastCutterImageSrc',
    });
  };

  nextLineImageSrc = e => {
    const { dispatch } = this.props;
    this.closeLineImagePreviewModal();
    dispatch({
      type: 'logger/nextLineImageSrc',
    });
  };

  lastLineImageSrc = e => {
    const { dispatch } = this.props;
    this.closeLineImagePreviewModal();
    dispatch({
      type: 'logger/lastLineImageSrc',
    });
  };

  copyLineImageToFileSaveInPreview = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/copyLineImageToFileSave',
      payload: 'inPreview',
    });
  };

  copyLineImageToFileSave = e => {
    const { dispatch } = this.props;
    const { lineImageIndexChoosed } = this.state;
    dispatch({
      type: 'logger/copyLineImageToFileSave',
      payload: lineImageIndexChoosed,
    });
  };

  copyCutterImageToFileSave = e => {
    const { dispatch } = this.props;
    const { cutterImageIndexChoosed } = this.state;
    dispatch({
      type: 'logger/copyCutterImageToFileSave',
      payload: cutterImageIndexChoosed,
    });
  };

  copyCutterImageToFileSaveInPreview = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/copyCutterImageToFileSave',
      payload: 'inPreview',
    });
  };

  // 界面上点击下一页的时候的逻辑
  nextDebugInfoPage = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'logger/nextDebugInfoPage',
    });
  };
  updateLoggerInfoByKeyWord = e => {
    const { dispatch } = this.props;
    const { KeyWord } = this.state;
    dispatch({
      type: 'logger/updateLoggerInfoByKeyWord',
      payload: KeyWord,
    });
  };

  render() {
    const Panel = Collapse.Panel;
    const {
      timeChoosed,
      debugIdChoosed,
      lineImageDirChoosed,
      lineImageIndexChoosed,
      cutterImageDirChoosed,
      cutterImageIndexChoosed,
    } = this.state;
    const {
      loggerFiles, // 日志文件,所有的日志文件,显示.顺序是按照日期倒叙排列.
      loggerInfo, // 日志显示的内容,如果是按照id号的时候,是要单独显示这个id的日志文件
      debugIdList, // debug文件的id号.
      lineImageIdListShow, // 线阵图片展示的时候需要显示哪些图片,显示前100张图片信息.如果超过了100张.
      lineImagePreviewModalVisible, // 线阵图片预览框是否显示
      lineImagePreviewSrc, // 线阵图片预览的时候展示的图片
      lineImagePreviewName, // 要显示的文件名称
      produceAmountData, // 月产量记录
      produceDayAmountData, // 日产量记录
      cutterImagePreviewModalVisible, // 铡刀的预览的时候展示的图片
      cutterImagePreviewSrc, // 铡刀预览对话框展示的图片内容
      cutterImagePreviewName, // 铡刀预览的文件名称
      cutterImageIdListShow, // 要显示的铡刀的图片编号的选择
      debugInfoEndFlag, // 日志是否已经到显示的结尾
    } = this.props.logger;

    const { Option } = Select;
    const children = [];
    for (let i = 0; i < loggerFiles.length; i++) {
      children.push(<Option key={i.toString() + i}>{loggerFiles[i]}</Option>);
    }

    const idChildren = [];
    const KeyWord = [];
    for (let i = 0; i < debugIdList.length; i++) {
      idChildren.push(<Option key={i.toString() + i}>{debugIdList[i]}</Option>);
    }

    let lineImageDirList;
    lineImageDirList = ['切线', '识别失败', '识别成功', '首板', '物料检测未通过'];

    let cutterImageDirList;
    cutterImageDirList = ['起点检测原图', '起点检测结果图', '终点检测原图', '终点检测结果图'];

    const lineImageDirSelectChildren = [];
    for (let i = 0; i < lineImageDirList.length; i++) {
      lineImageDirSelectChildren.push(
        <Option key={i.toString() + i}>{lineImageDirList[i]}</Option>
      );
    }

    const lineImageIndexChildren = [];
    for (let i = 0; i < lineImageIdListShow.length; i++) {
      lineImageIndexChildren.push(<Option key={i.toString() + i}>{lineImageIdListShow[i]}</Option>);
    }

    const cutterImageDirSelectChildren = [];
    for (let i = 0; i < cutterImageDirList.length; i++) {
      cutterImageDirSelectChildren.push(
        <Option key={i.toString() + i}>{cutterImageDirList[i]}</Option>
      );
    }

    const cutterImageIndexChildren = [];
    for (let i = 0; i < cutterImageIdListShow.length; i++) {
      cutterImageIndexChildren.push(
        <Option key={i.toString() + i}>{cutterImageIdListShow[i]}</Option>
      );
    }

    const timeitem = [];
    for (let i = 0; i < loggerInfo.length; i++) {
      let head = loggerInfo[i][0];
      let info = loggerInfo[i][1];
      timeitem.push(
        <Timeline.Item color={'green'} key={i.toString()}>
          <p>
            {head} {info}
          </p>
        </Timeline.Item>
      );
    }

    const salesData = [];
    for (let i = 0; i < produceAmountData.length; i += 1) {
      salesData.push({
        x: produceAmountData[i][0],
        y: produceAmountData[i][1],
      });
    }

    const columns = [
      {
        title: <font style={{ color: '#9933cc', fontSize: 18 }}>日期</font>,
        dataIndex: 'dayIndex',
        key: 'dayIndex',
      },
      {
        title: <font style={{ color: '#9933cc', fontSize: 18 }}>产量</font>,
        dataIndex: 'dayAmount',
        key: 'dayAmount',
      },
    ];

    return (
      <>
        <Collapse onChange={this.callback} style={{ marginLeft: 220 }}>
          <Panel header="日志查看分析" key="0">
            <Card>
              <Row>
                <span>{<font style={{ color: '#660099', fontSize: 16 }}>日志文件选择</font>}</span>
                <Select
                  showSearch
                  style={{ width: 250, marginLeft: 20 }}
                  optionFilterProp="children"
                  onChange={this.onChange}
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {children}
                </Select>
                <TimePicker
                  value={timeChoosed}
                  onChange={this.onTimeChooseChange}
                  style={{ marginLeft: 30 }}
                />
                <Button style={{ marginLeft: 20 }} onClick={this.updateLoggerInfoByHourTime}>
                  按时间查看日志
                </Button>
                <Select
                  showSearch={true}
                  value={debugIdChoosed}
                  style={{ width: 100, marginLeft: 20 }}
                  onSearch={this.handleDebugIdOnSearch}
                  onChange={this.onIdSelectChange}
                  filterOption={false}
                >
                  {idChildren}
                </Select>
                <Button onClick={this.updateLoggerInfoByBoardIndex} style={{ marginLeft: 20 }}>
                  按板编号查看日志
                </Button>
                <Input
                  onChange={e => this.setState({ KeyWord: e.target.value })}
                  style={{ marginLeft: 20, width: 200 }}
                />
                ,
                <Button onClick={this.updateLoggerInfoByKeyWord} style={{ marginLeft: 20 }}>
                  按关键字查看日志
                </Button>
              </Row>
              <Row style={{ marginTop: 20 }}>
                <Button type="primary" onClick={this.nextDebugInfoPage} disabled={debugInfoEndFlag}>
                  {debugInfoEndFlag ? '已是最后一页' : '下一页'}
                </Button>
                <Button onClick={this.openDebugDir} style={{ marginLeft: 30 }}>
                  打开日志文件目录
                </Button>
                <Timeline style={{ marginTop: 15 }}>{timeitem}</Timeline>
              </Row>
            </Card>
          </Panel>
          <Panel header="上料图片查看" key="1">
            <Card>
              <Row>
                <span>{<font style={{ color: '#660099', fontSize: 16 }}>图片目录选择</font>}</span>
                <Select
                  showSearch
                  style={{ width: 250, marginLeft: 20 }}
                  optionFilterProp="lineImageDirSelectChildren"
                  defaultValue="切线"
                  onChange={this.onLineImageDirChange}
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {lineImageDirSelectChildren}
                </Select>
                <Button onClick={this.openLineImageDir} style={{ marginLeft: 15 }}>
                  打开图片目录
                </Button>
              </Row>
              <Row style={{ marginTop: 30 }}>
                <span>{<font style={{ color: '#660099', fontSize: 16 }}>图片编号选择</font>}</span>
                <Select
                  showSearch={true}
                  value={lineImageIndexChoosed}
                  style={{ width: 250, marginLeft: 20 }}
                  onChange={this.onLineImageIdChange}
                  onSearch={this.handleLineImageIndexOnSearch}
                  filterOption={false}
                >
                  {lineImageIndexChildren}
                </Select>
                <Button onClick={this.preViewLineImage} style={{ marginLeft: 15 }}>
                  预览图片
                </Button>

                <Button onClick={this.copyLineImageToFileSave} style={{ marginLeft: 20 }}>
                  复制图片到临时保存目录
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.openFileSaveDir}>
                  打开临时保存图片的目录
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clearFileSaveDir}>
                  清空临时保存图片的目录
                </Button>
              </Row>
            </Card>
          </Panel>
          <Panel header="铡刀图片查看" key="铡刀图片查看">
            <Card>
              <Row>
                <span>{<font style={{ color: '#660099', fontSize: 16 }}>图片目录选择</font>}</span>
                <Select
                  showSearch
                  style={{ width: 250, marginLeft: 20 }}
                  optionFilterProp="cutterImageDirSelectChildren"
                  defaultValue="起点检测原图"
                  onChange={this.onCutterImageDirChange}
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {cutterImageDirSelectChildren}
                </Select>
                <Button onClick={this.openCutterImageDir} style={{ marginLeft: 15 }}>
                  打开图片目录
                </Button>
              </Row>
              <Row style={{ marginTop: 30 }}>
                <span>{<font style={{ color: '#660099', fontSize: 16 }}>图片编号选择</font>}</span>
                <Select
                  showSearch={true}
                  value={cutterImageIndexChoosed}
                  style={{ width: 250, marginLeft: 20 }}
                  onChange={this.onCutterImageIdChange}
                  onSearch={this.handleCutterImageIndexOnSearch}
                  filterOption={false}
                >
                  {cutterImageIndexChildren}
                </Select>
                <Button onClick={this.preViewCutterImage} style={{ marginLeft: 15 }}>
                  预览图片
                </Button>

                <Button onClick={this.copyCutterImageToFileSave} style={{ marginLeft: 20 }}>
                  复制图片到临时保存目录
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.openFileSaveDir}>
                  打开临时保存图片的目录
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={this.clearFileSaveDir}>
                  清空临时保存图片的目录
                </Button>
              </Row>
            </Card>
          </Panel>
          <Panel header="生产统计记录" key="生产统计记录">
            <GridContent>
              <Suspense fallback={null}>
                <SalesCard salesData={salesData} />
              </Suspense>
            </GridContent>
            <Card style={{ marginTop: 20 }} title="近一个月日产量记录">
              <p>
                {
                  <font style={{ color: '#FF0000', fontSize: 16 }}>
                    备注: 产量记录会在新的一年开始的时候进行重置,请在年末做好备忘记录{' '}
                  </font>
                }
              </p>
              {produceDayAmountData.length >= 1 ? (
                <Table columns={columns} dataSource={produceDayAmountData} />
              ) : (
                ''
              )}
            </Card>
          </Panel>
        </Collapse>

        <Modal
          title={<font style={{ color: '#FF0000', fontSize: 16 }}>线阵相机图片查看预览框 </font>}
          visible={lineImagePreviewModalVisible}
          width={window.screen.availWidth - 50}
          style={{ top: 0, left: 0, right: 0, bottom: 0 }}
          footer={null}
          closable={true}
          onCancel={this.closeLineImagePreviewModal}
        >
          <Card>
            <Card.Grid style={{ width: '70%', textAlign: 'left' }}>
              <Stage width={1000} height={1650}>
                <Layer>{lineImagePreviewSrc ? <LineImage /> : <Image width={1000} />}</Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '30%', textAlign: 'left', marginTop: 650 }}>
              <p>
                <font style={{ color: '#FF0000' }}>图像目录:</font>
                <span style={{ marginLeft: 20 }}>{lineImageDirChoosed}</span>
              </p>
              <p>
                <font style={{ color: '#FF0000' }}>图像名称:</font>
                <span style={{ marginLeft: 20 }}>{lineImagePreviewName}</span>
              </p>
              <Button onClick={this.lastLineImageSrc}>上一个</Button>
              <Button style={{ marginLeft: 20 }} onClick={this.nextLineImageSrc}>
                下一个
              </Button>
              <Button style={{ marginLeft: 20 }} onClick={this.closeLineImagePreviewModal}>
                关闭预览框
              </Button>
              <Button onClick={this.copyLineImageToFileSaveInPreview} style={{ marginLeft: 15 }}>
                复制图片到临时保存目录
              </Button>
            </Card.Grid>
          </Card>
        </Modal>
        <Modal
          title={<font style={{ color: '#FF0000', fontSize: 16 }}>铡刀相机图片预览框</font>}
          visible={cutterImagePreviewModalVisible}
          width={window.screen.availWidth - 50}
          style={{ top: 0, left: 0, right: 0, bottom: 0 }}
          footer={null}
          closable={true}
          onCancel={this.closeCutterImagePreviewModal}
        >
          <Card>
            <Card.Grid style={{ width: '70%', textAlign: 'left' }}>
              <Stage width={950} height={880}>
                <Layer>{cutterImagePreviewSrc ? <CutterImage /> : <Image width={1000} />}</Layer>
              </Stage>
            </Card.Grid>
            <Card.Grid style={{ width: '30%', textAlign: 'left' }}>
              <p>
                <font style={{ color: '#FF0000' }}>图像目录:</font>
                <span style={{ marginLeft: 20 }}>{cutterImageDirChoosed}</span>
              </p>
              <p>
                <font style={{ color: '#FF0000' }}>图像名称:</font>
                <span style={{ marginLeft: 20 }}>{cutterImagePreviewName}</span>
              </p>
              <Button onClick={this.lastCutterImageSrc}>上一个</Button>
              <Button style={{ marginLeft: 20 }} onClick={this.nextCutterImageSrc}>
                下一个
              </Button>
              <Button style={{ marginLeft: 20 }} onClick={this.closeCutterImagePreviewModal}>
                关闭预览框
              </Button>
              <Button onClick={this.copyCutterImageToFileSaveInPreview} style={{ marginLeft: 15 }}>
                复制图片到临时保存目录
              </Button>
            </Card.Grid>
          </Card>
        </Modal>
      </>
    );
  }
}
export default HdLogger;
